<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/admin/notices'}">首页管理</el-breadcrumb-item>
      <el-breadcrumb-item>学院管理</el-breadcrumb-item>
      <el-breadcrumb-item>学院列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card >
      <!--表格区域 stripe 创建带斑马纹的表格-->
      <el-table :data="collegeList" stripe style="font-size: 15px;margin:0 110px;width:960px" >
        <el-table-column align="center" label="序号" width="120" type="index" ></el-table-column>
        <el-table-column align="center" label="学院代码" width="220" prop="id"></el-table-column> 
        <el-table-column align="center" label="学院名称" width="220" prop="label"></el-table-column> 
        <el-table-column align="center" label="操作(编辑/学院领导设置 /删除)" width="400" > 
          <template slot-scope="scope" >
            <el-button type="success" icon="el-icon-edit" circle  @click="editCollege(scope.row)" ></el-button>
            <el-button type="primary" icon="el-icon-right" circle @click="manageCollege(scope.row.id)" style="margin-left:10%"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteCollege(scope.row.id, scope.row.label)" style="margin-left:10%"></el-button>
          </template>
        </el-table-column>
      </el-table> 
      <el-row v-if="pageParam.currentPage === lastPage" style="font-size: 15px;margin:0 100px" width="1000px">
        <el-link icon="el-icon-plus" type="primary" round style="margin-left: 45%; margin-top: 20px;font-size: 15px" 
          @click="addCollege">录入学院信息</el-link>
      </el-row>
    </el-card>
      <!-- 底部分页按钮 -->
      <el-pagination background style="margin-left:42%"
        :current-page.sync="pageParam.currentPage"
        :page-size.sync="pageParam.pageSize"
        @current-change="nowPage"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>

    <!--修改专业信息的对话框-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px">
      <!--主体内容区域-->
      <el-form :model="collegeForm" :rules="collegeFormRules" ref="collegeFormRef" label-width="80px" style="margin-left:100px">
        <el-form-item prop="id" label="专业代码">
          <el-input v-model="collegeForm.id" placeholder="请输入专业代码"></el-input>
        </el-form-item>
        <el-form-item prop="label" label="专业名称">
          <el-input v-model="collegeForm.label" placeholder="请输入专业名称"></el-input>
        </el-form-item> 
      </el-form>
      <el-row style="margin-left:30%;margin-top:50px">
        <el-button round @click.native="dialogVisible = false ">取 消</el-button>
        <el-button round v-if="isAdd" type="primary" @click.native="submitAddCollegeForm('collegeFormRef')" style="margin-left:10%">完成录入</el-button>
        <el-button round v-else type="success" @click.native="submitEditCollegeForm('collegeFormRef')" style="margin-left:10%">提交修改</el-button> 
      </el-row>
      <!--底部按钮区域--> 
    </el-dialog> 
  </div>
</template>

<script>
  import {getAdminCollegePage, isExistCollegeId, deleteCollegeById, updateCollege, adminAddCollege, getCollegeTotal} from '../../axios/college' 
  export default {
    name: 'AdminCollegeList',
    data(){
      return {
        lastPage: 0, // 最后一页的页码
        total: 0, // 专业总数 
        pageParam:{  currentPage: 1,   pageSize: 10  }, // 页码参数
        dialogVisible: false, // 添加/编辑 专业对话框的 显示/隐藏
        isAdd: false,
        dialogTitle: '',  
        collegeList: [], // 学院列表 
        collegeForm: { },
        collegeFormRules:{
          id: [ { required: true, message: '学院代码不能为空', trigger: 'blur' } ],
          label: [ { required: true, message: '学院名称不能为空', trigger: 'blur' } ], 
        } 
      }
    },
    created(){
      this.getCollegeList()
    },
    methods:{
      getCollegeList(){
        // 向后端发送请求，获取所有学院信息列表
        getAdminCollegePage(this.pageParam).then(res => {
            if(res.success)  this.collegeList = res.data   
        })

        getCollegeTotal().then(res => {
          if(res.success) {
            this.total = res.data
            this.lastPage = Math.floor(this.total / 10);
            if(this.total % 10 !== 0) this.lastPage ++
          }
        })
        // 无后端，模拟数据
        // this.collegeList = [
        //   { id: '014301', label: '数学与计算机学院'  },
        //   { id: '014302', label: '信息工程学院'  },
        //   { id: '014303', label: '先进制造学院'  },
        //   { id: '014304', label: '资源与环境学院' },
        //   { id: '014305', label: '生物科学学院' }
        // ]
      }, 
      // 页码改变时，及时更新数据
      nowPage(page){
        this.pageParam.currentPage = page // 更新当前指向的页码
        this.getCollegeList() 
      }, 
      editCollege(collegeData){ 
        this.isAdd = false
        this.dialogTitle = '编辑学院信息'
        this.collegeForm = collegeData
        this.collegeForm.oldId = collegeData.id; 
        this.dialogVisible = true
      },
      addCollege(){
        this.dialogTitle = '录入学院信息'
        this.collegeForm = {}
        this.isAdd = true
        this.dialogVisible = true  
      },
      // 管理员删除指定 id 的学院信息
      deleteCollege(id, label){
        this.$confirm('此操作将永久删除“' + label + ' ”学院, 是否继续?', '提示', {
          roundButton: true,
          confirmButtonText: '删除',
          cancelButtonText: '取消', 
          type: 'warning'
        }).then(() => {
          // 发送后端请求，删除指定 id 的通知
          deleteCollegeById(id).then(res => {
            if(res.success){ 
              this.$message.success('删除成功!');
              this.getCollegeList()
            }
          })  
        }).catch(() => {
          this.$message.info('已取消删除!');          
        }); 
      },
      // 决定跳转的路径
      manageCollege(id){ 
        this.$router.push(`/admin/college/${id}/leader`)
      }, 
      submitAddCollegeForm(collegeFormRef){
        // 发送后端请求，查询专业表中是否已存在此专业代码
        isExistCollegeId(this.collegeForm.id).then(res => {
          if(res.success){ 
            this.$refs[collegeFormRef].validate(valid =>{ 
              if(valid){ 
                this.$confirm('确认提交吗?', '系统提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then( () => { 
                  // 此时发送后端请求，保存录入信息
                  adminAddCollege(this.collegeForm).then(res => {
                    if(res.success){
                      this.$message.success('录入成功!')
                      this.dialogVisible = false 
                      this.getCollegeList()
                    }  
                  })   
                }).catch(() => {  
                  this.$message.info('已取消提交!');   
                })
              }else{
                this.$message.error('请按要求填写各项信息!')
              }
            })
          } 
        })   
      },
      submitEditCollegeForm(collegeFormRef){ 
        this.$refs[collegeFormRef].validate(valid =>{ 
          if(valid){ 
            this.$confirm('确认提交吗?', '系统提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then( () => {  
              // 此时发送后端请求，保存修改信息
              updateCollege(this.collegeForm).then(res => {
                if(res.success){
                  this.$message.success('修改成功!') 
                  this.dialogVisible = false  
                  this.getCollegeList()
                } 
              }) 

            }).catch(() => {  
              this.$message.info('已取消提交!');   
            })
          }else{
            this.$message.error('请按要求填写各项信息!')
          }
        })
      },  
    }
  }
</script>

<style scoped>
  .el-form-item .el-input{
    width: 57%;
  }
</style>